<template>
    <div class="addThesis">
        <el-form :model="articleForm"  ref="ruleForm" label-width="120px">
            <el-form-item label="标题" prop="region">
                <el-col :span="12">
                    <el-input v-model="articleForm.title" placeholder="请输入标题"></el-input>
                </el-col>
            </el-form-item>
            <el-form-item label="作者" prop="region">
                <el-col :span="12">
                    <el-input v-model="articleForm.author" placeholder="请输入作者姓名"></el-input>
                </el-col>
            </el-form-item>
            <el-form-item label="杂志" prop="journalname">
                <el-col :span="12">
                    <el-input v-model="articleForm.journalname" placeholder="请输入杂志"></el-input>
                </el-col>
            </el-form-item>
            <el-form-item label="出版日期" prop="publishdate">
                <el-col :span="12">
                  <el-date-picker type="date" value-format="yyyy-MM-dd" placeholder="选择出版日期" v-model="articleForm.publishdate" style="width: 100%;"></el-date-picker>
                </el-col>
            </el-form-item>
            <el-form-item label="DOI" prop="region">
                <el-col :span="12">
                    <el-input v-model="articleForm.doi" placeholder="请输入DOI"></el-input>
                </el-col>
            </el-form-item>
            <el-form-item label="摘要" prop="region">
                <el-col :span="12">
                    <el-input v-model="articleForm.summary" type="textarea" placeholder="请输入摘要"></el-input>
                </el-col>
            </el-form-item>
            <el-form-item v-show="operateType === 'edit'" label="论文图片展示：" prop="region" class="msTop">
              <img class="imgSize" :src="articleForm.picture">
            </el-form-item>
            <el-form-item :label="operateType === 'edit' ? '修改论文图片：': '上传论文图片'" class="msTop">
              <el-upload
                  class="upload-demo"
                  action="http://39.106.171.39:8011/mbl/FileController/uploadFile"
                  ref="newsUpload"
                  :on-change="handleFileChange"
                  :file-list="articleFileList"
                  :auto-upload="false">
                <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload" :loading="fileLoading">上传到服务器</el-button>
                <!--          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>-->
              </el-upload>
            </el-form-item>
            <el-form-item label="是否显示">
                <el-radio-group v-model="articleForm.flag">
                    <el-radio :label="'0'" selected>是</el-radio>
                    <el-radio :label="'1'">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="addSubmit" :loading="loading">提交</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    import { addArticle,updateArticle } from '@/api/paperManage'
    import { uploadFile } from '@/api/eventManage'
    export default {
        name: "AddThesis",
        props:{
            operateType: {
                type: String,
                default: () => 'add'
            },
            articleInfo: {
                type: Object,
                default: () => {
                    return {
                        articleid: '',
                        title: '',
                        author: '',
                        journalname: '',
                        publishdate: '',
                        doi: '',
                        summary : '',
                        picture: '',
                        flag: '',
                    }
                }
            }
        },
        watch: {
            articleInfo: {
                handler(newVal, objVal) {
                    if(newVal !== objVal){
                        this.articleForm = newVal
                    }
                },
            }
        },
        data(){
            return{
              fileLoading: false,
                articleFileList: [],
                loading: false,
                articleForm: this.articleInfo,
              successImagUrl: ''
            }
        },
        methods:{
          handleFileChange(file, FileList){
            this.articleFileList = FileList
          },
          async submitUpload(){
            let formData = new FormData()
            formData.append('file', this.articleFileList[0].raw)
            this.fileLoading = true
            const res = await uploadFile(formData)
            this.successImagUrl = res.message
            this.$message({
              type: 'success',
              message: '上传成功'
            })
            this.fileLoading = false
          },
            async addSubmit() {
                if (this.operateType === 'add') {
                    try {
                      this.articleForm.picture = this.successImagUrl
                        this.loading = true
                        const res = await addArticle(this.articleForm)
                        console.log(res)
                        this.$emit('updateTable')
                    } catch (e) {
                        console.log(new Error(e))
                    }
                    this.loading = false
                } else {
                    try {
                      this.articleForm.picture = this.successImagUrl ? this.successImagUrl : this.articleInfo.picture
                        this.articleForm.articleid = this.articleInfo.articleid
                        this.loading = true
                        const res = await updateArticle(this.articleForm)
                        this.$emit('updateTable')
                        console.log(res)
                    } catch (e) {
                        console.log(new Error(e))
                    }
                    this.loading = false
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    .addThesis{
      .imgSize{
        width: 30px;
        height: 30px;
      }
        /deep/ .el-form-item {
            margin-bottom: 15px;
        }
        /deep/ .el-form-item__label, .el-button--medium {
            font-size: 14px;
        }
        /deep/ .el-input__inner, .el-textarea__inner {
            font-size: 12px;
        }
    }

</style>
